<template>
    <div>
        <div>
            <q-parallax :height="300" :speed="0.5">
                <template v-slot:media>
                    <img :src="userInfo.bgImg">
                </template>
                <UserInfoDetail :user-info="userInfo"/>
            </q-parallax>
        </div>
        <q-separator/>
        <div class="row margin-left margin-top">
            <div class="text-subtitle2">
                签名：
            </div>
            <div class="text-grey margin-left q-pa-sm">
                {{userInfo.remark?userInfo.remark:'Not Setting...'}}
            </div>
        </div>
        <q-separator spaced/>
        <div class="row margin-left q-pa-sm">
            <div class="text-subtitle2 row ">
                账号：
            </div>
            <div class="text-grey row margin-left">
                {{userInfo.accountNum?userInfo.accountNum:userInfo.userId}}
            </div>
        </div>
        <q-separator spaced/>
        <div class="row margin-left q-pa-sm">
            <div class="text-subtitle2 row">
                电话：
            </div>
            <div class="text-grey  margin-left">
                {{userInfo.phone?userInfo.phone:'Not Setting...'}}
            </div>
        </div>
        <q-separator spaced/>
        <div class="row margin-left q-pa-sm">
            <div class="text-subtitle2 row">
                城市：
            </div>
            <div class="text-grey row margin-left">
                {{userInfo.from?userInfo.from:'Not Setting...'}}
            </div>
        </div>
        <q-separator spaced/>
        <div class="row margin-left q-pa-sm" v-if="userInfo.imgs">
            <div class="text-subtitle2 row">
                照片：
            </div>
            <q-scroll-area
                    horizontal
                    :thumb-style="thumbStyle"
                    class="bg-grey-1 profile-pic-scroll margin-top"
            >
                <div class="row no-wrap">
                    <q-intersection
                            v-for="item in userInfo.imgs"
                            :key="item.id"
                            transition="scale"
                            class="example-item"
                    >
                        <q-avatar rounded size="60px" class="margin-left">
                            <img :src="item.img"/>
                            <q-badge floating color="green">{{item.remark}}</q-badge>
                        </q-avatar>
                    </q-intersection>
                </div>
            </q-scroll-area>
        </div>
    </div>

</template>

<script>  import UserInfoDetail from './index.vue'

export default {
  components: {UserInfoDetail},
  name: "userInfo",
  props: {
    userInfo: {
      type: Object
    }
  },
  data () {
    return {
      slide: "first",
    }
  },
  computed: {
    thumbStyle () {
      return {
        right: '2px',
        borderRadius: '5px',
        backgroundColor: '#4caf50',
        width: '1px',
        opacity: 0.75
      }
    }
  }
}
</script>

<style scoped>
    .profile-pic-scroll {
        width: 100%;
        height: 80px;
    }


</style>
